<template>
	<!-- 分析结果于建议 -->
	<view id="result" :class="toggleNum == 1?'resuktm1':toggleNum == 2?'resuktm2':toggleNum == 3?'resuktm3':'' ">
		<!-- 正常 -->
		<view class="title" :class="toggleNum == 1?'m1':toggleNum == 2?'m2':toggleNum == 3?'m3':'' ">
			<image :src="vuex_httpImageUrl && vuex_httpImageUrl+'static/index/jianyi/toggle.png'" mode="widthFix" class="toggle" @click="C_toggle"></image>
			<view class="time">{{db.createtime}}</view>
			<view v-if="toggleNum == 1">
				<image :src="vuex_httpImageUrl && vuex_httpImageUrl+'static/index/jianyi/b/pan.png'" mode="widthFix" class="titlebg"></image>
				<image 
					:src="vuex_httpImageUrl && vuex_httpImageUrl+'static/index/jianyi/b/zheng.png'" mode="widthFix"
					class="titlebgzheng" 
					:style="
						db.score >=0 && db.score <16?'transform: rotate(-122deg)':
						db.score >=16 && db.score <32?'transform: rotate(-77deg)':
						db.score >=32 && db.score <48?'transform: rotate(-31deg)':
						db.score >=48 && db.score <64?'transform: rotate(30deg)':
						db.score >=64 && db.score <80?'transform: rotate(71deg)':
						db.score >=80 && db.score <100?'transform: rotate(121deg)':''
					"
							></image>
			</view>
			<view v-else-if='toggleNum == 2' >
				<image 
					:src="vuex_httpImageUrl && vuex_httpImageUrl+'static/index/jianyi/c/title.png'" 
					mode="widthFix"
					class="titlebg"
				></image>
			</view>
			<view v-else-if='toggleNum == 3' class="leaf">
				<image
					:src="vuex_httpImageUrl && vuex_httpImageUrl+'static/index/jianyi/d/tit.png'" 
					mode="widthFix"
					v-for="(item,index) in 8" :key='index'
					:style="
						'transform: rotate('+(index+1)*45 +'deg);'
					"
				></image>
				<view class="leafText">整体得分:{{db.score || ''}}</view>
				<text>{{db.score}}</text>
			</view>
			<view v-else style="position: relative;">
				<image :src="vuex_httpImageUrl && vuex_httpImageUrl+'static/index/jianyi/a/title.png'" mode="widthFix"
					class="titlebg"></image>
				<text>{{db.score}}</text>
			</view>
			<view class="font">{{db.health}}</view>
		</view>
		<view class="list">
			<view v-for="(item,index) in db.reanalyse" :key='index' :class="toggleNum == 1?'m1':toggleNum == 2?'m2':toggleNum == 3?'m3':'' ">
				<view class="tit">
					<text>【{{item.name}}】</text>
					<text v-if="item.status == 0" @click="setUp(item.id,index)">设置为特别关注</text>
					<text v-if="item.status == 1" @click="setUp(item.id,index)">特别关注</text>
				</view>
				<image 
					v-if="toggleNum == 1" :src="vuex_httpImageUrl && vuex_httpImageUrl+'static/index/jianyi/b/'+item.imgIndex+ '.png'"
					mode="widthFix" 
					class="listImg"></image>
				<image 
					v-else-if="toggleNum == 2" :src="vuex_httpImageUrl && vuex_httpImageUrl+'static/index/jianyi/c/'+item.imgIndex+ '.png'"
					mode="widthFix" 
					class="listImg"></image>
				<image
					v-else-if="toggleNum == 3" :src="vuex_httpImageUrl && vuex_httpImageUrl+'static/index/jianyi/d/'+item.imgIndex+ '.png'"
					mode="widthFix" 
					class="listImg"></image>
				<image 
					:src="vuex_httpImageUrl && vuex_httpImageUrl+'static/index/jianyi/a/'+item.imgIndex+ '.png'"
					mode="widthFix" v-else 
					class="listImg"></image>
					
				<view class="font"> {{item.health}} </view>
			</view>
		</view>
		<view class="fooder" :class="toggleNum == 1?'m1':toggleNum == 2?'m2':toggleNum == 3?'m3':'' ">
			<view class="tit">健康管理建议</view>
			<view class="font">
				{{db.analyse || ''}}
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				db: {},
				toggleNum: 0
			}
		},
		onLoad(o) {
			console.log(o,'o');
			this.def_db(o.id)
			this.toggleNum = 0
		},
		watch: {
			// uni.getUpdateManager()
			toggleNum(val) {
				if (val == 0) {

				}
				if (val == 1) {
					uni.setNavigationBarColor({
						frontColor: '#ffffff',
						backgroundColor: '#050726'
					})
				}
				if (val == 2) {
					uni.setNavigationBarColor({
						frontColor: '#ffffff',
						backgroundColor: '#622F11'
					})
				}
				if (val == 3) {
					uni.setNavigationBarColor({
						frontColor: '#ffffff',
						backgroundColor: '#558239'
					})
				}
			}
		},
		filters: {

		},
		methods: {
			// 设置特别关注
			setUp(reanalyse_id, index) {
				this.$u.post('/health/collect_reanalyse', {
					reanalyse_id
				}).then(res => {
					this.db.reanalyse[index].status = res.data.status
				})
			},
			def_db(remind_id="") {
				this.$u.post('/health/remindinfo',{remind_id}).then(res => {
					console.log(res.data);
					res.data.reanalyse.forEach(item => {
						item.imgIndex = item.score >= 0 && item.score < 20 ? 1 :
							item.score >= 20 && item.score < 40 ? 2 :
							item.score >= 40 && item.score < 60 ? 3 :
							item.score >= 60 && item.score < 80 ? 4 :
							item.score >= 80 && item.score < 100 ? 5 : ''
					})
					this.db = res.data
				})
			},
			C_toggle() {
				this.toggleNum == 4 ? this.toggleNum = 1 : ++this.toggleNum
			}
		}
	}
</script>
<style lang="scss">
	#result {
		&.resuktm1{
			background-color: #090A37;
		}
		&.resuktm2{
			background-color: #8D5535;
		}
		&.resuktm3{
			background-color: #ADC59D;
		}
		padding: 20rpx;
		box-sizing: border-box;

		>view {
			margin-bottom: 20rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;

			&.title {
				position: relative;

				text,
				.time {
					position: absolute;
					right: 20rpx;
				}

				text {
					top: 32%;
					right: 42%;
					font-size: 100rpx;
					color: #FFFFFF;
				}

				.toggle {
					position: absolute;
					z-index: 10;
					top: 20rpx;
					left: 20rpx;
					width: 50rpx;
					height: 50rpx;
				}

				.titlebg {
					width: 60%;
					margin: 50rpx auto 80rpx;
					display: block;
				}


				&.m1 {
					border: 3px solid #01DBFF;
					box-sizing: border-box;
					background-color: #17127B;
					color: #FFFFFF;
					box-shadow: 1px 1px 30rpx #01DBFF inset;
					.font {
						color: rgba(255, 255, 255, .7);
					}
					.titlebgzheng{
						width: 150px;
						position: absolute;
						top: 21%;
						left: calc(50% - 135rpx);
						// transform: rotate(-122deg);
						// -122  健康     
						// -77  正常     
						// -31  中度     
						// 30  中重     
						// 71  重度     
						// 121  极重     
					}
				}
				&.m2{
					background-color: #F9EEDB;
				}
				&.m3{
					background-color: rgba(255,255,255,.7);
					
					.leaf{
						width: 250rpx;
						height: 250rpx;
						margin: 50rpx auto 70rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						text{
							font-weight: bold;
							font-size:38rpx;
							color: #3D771A;
							position: initial;
						}
						.leafText{
							font-weight: bold;
							font-size:38rpx;
							color: #3D771A;
							display: block;
							text-align: center;
							position: absolute;
							bottom: -50rpx;
						}
						image{
							position: absolute;
							top: 0;
							left: calc(50% - 15rpx);
							width: 40rpx;
							transform-origin: 50% 145%;
						}
					}
				}
			}
			@mixin hunru {
				&.m1{
					border: 3px solid #01DBFF;
					box-sizing: border-box;
					background-color: #17127B;
					color: #FFFFFF;
					box-shadow: 1px 1px 30rpx #01DBFF inset;
					.font {
						color: rgba(255, 255, 255, .7);
					}
				}
				&.m2{
					background-color: #F9EEDB;
					.font {
						color: #7A5111;
					}
				}
				&.m3{
					background-color: rgba(255,255,255,.7);
					.font {
						color: #486533;
					}
				}
			}
			&.list {
				background-color: transparent;
				padding: 0;
				
				>view {
					margin-bottom: 20rpx;
					background-color: #FFFFFF;
					border-radius: 20rpx;
					padding: 20rpx;

					.tit {
						display: flex;
						justify-content: space-between;
					}

					.listImg {
						width: 100%;
						display: block;
						margin: 30rpx auto;
					}
					@include hunru;
				}
			}
			&.fooder{
				@include hunru;
			}

			.font {
				color: rgba(0, 0, 0, .5);
			}
		}
	}
</style>
